import React, { PureComponent } from 'react';
import { Spin, Card, Button } from 'antd';
import { connect } from 'umi';
import { formatMessage } from 'umi';
import { eventTrack } from '@/utils/track';
import { get as _get } from 'object-path';
import { history } from 'umi';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import logo from '@/assets/logo.png';
import styles from '@/pages/Organization/OrgManage/OrgList.less';
import AuthComponent from '@/utils/auth/AuthComponent';
import AuthCode from '@/utils/auth/AuthCode';
import { withRoutePage } from '@/utils/enhanceUtils';
import CompanyProfile from './DetailPage/CompanyProfile';
// 公司详情-组织架构-员工
// const { TabPane } = Tabs;

// [DELETE这个页面应该可以删除了，属于旧的组织机构]

@withRoutePage
@connect(({ orgManage, loading }) => ({
    orgManage,
    loading: loading.global
}))
class OrgDetail extends PureComponent {
    constructor(props) {
        super(props);
        this.authCode = new AuthCode(props.route.code).authCode;
    }

    componentDidMount() {
        this.getData();
    }

    getData = () => {
        const {
            location: { query },
            dispatch
        } = this.props;
        const { id } = query;
        dispatch({
            type: 'orgManage/fetchOrgInfoDetail',
            payload: {
                id
            }
        });
    };

    getMeta = () => {
        const {
            orgManage: { orgInfoDetail }
        } = this.props;
        return (
            <div style={{ display: 'flex', alignItems: 'center' }}>
                <span className={styles.logo}>
                    <img alt="logo" src={logo} />
                </span>
                <div style={{ marginLeft: '10px' }}>
                    <div style={{ fontSize: '20px', color: '#000000' }}>{_get(orgInfoDetail, 'companyName', '')}</div>
                </div>
            </div>
        );
    };

    editOrg = async () => {
        const {
            location: { query }
        } = this.props;
        const { id } = query;
        // 埋点
        await eventTrack({
            eventName: 'organization_orgDetail_edit_click'
        });
        history.push({
            pathname: '/office/personnelManagement/organization/orgList/orgEdit',
            query: {
                id
            }
        });
    };

    handelClick = () => {
        console.log(1);
    };

    getExtra = () => (
        <div>
            <AuthComponent code={this.authCode('detail:company')}>
                <Button
                    // style={{ marginRight: '15px' }}
                    onClick={this.editOrg}
                >
                    {formatMessage({
                        id: 'btn.orgDetail.editOrg'
                    })}
                </Button>
            </AuthComponent>
            {/* <Button>配置功能</Button> */}
        </div>
    );

    render() {
        const {
            orgManage: { orgInfoDetail },
            loading,
            route
        } = this.props;
        return (
            <PageHeaderWrapper>
                <Spin spinning={loading}>
                    <Card
                        title={this.getMeta()}
                        extra={this.getExtra()}
                        bodyStyle={{ display: 'none' }}
                        headStyle={{ border: '' }}
                        bordered={false}
                        className={styles.orgDetailCard}
                    />
                    {/* <Tabs
                        defaultActiveKey="1"
                        tabBarStyle={{
                            backgroundColor: '#fff',
                            paddingLeft: '30px'
                        }}
                        className={styles.tabsPaneMargin}
                    >
                        <TabPane
                            tab={formatMessage({
                                id: 'tab.orgDetail.orgInfo'
                            })}
                            key="1"
                        > */}
                    <CompanyProfile fetchAllData={this.getData} orgInfoDetail={orgInfoDetail} route={route} />
                    {/* </TabPane>
                    </Tabs> */}
                </Spin>
            </PageHeaderWrapper>
        );
    }
}
export default OrgDetail;
